<template>
  <div class="electricity-statistics-card">
    <div class="card-header">
      <div class="title">
        <span>近期数据汇总</span>
        <el-tooltip content="电量使用数据统计" placement="top">
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="card-content">
      <div class="data-row">
        <div class="data-item">
          <div class="label">今日用电量(KW·h)</div>
          <div class="value red">{{ stats.todayUsage || '0.00' }}</div>
        </div>
        <div class="data-item">
          <div class="label">昨日用电量(KW·h)</div>
          <div class="value green">{{ stats.yesterdayUsage || '0.00' }}</div>
        </div>
      </div>
      
      <div class="data-row">
        <div class="data-item">
          <div class="label">本月用电量(KW·h)</div>
          <div class="value red">{{ stats.currentMonthUsage || '0.00' }}</div>
        </div>
        <div class="data-item">
          <div class="label">上月用电量(KW·h)</div>
          <div class="value green">{{ stats.lastMonthUsage || '0.00' }}</div>
        </div>
      </div>
      
      <div class="data-row">
        <div class="data-item">
          <div class="label">今年用电量(KW·h)</div>
          <div class="value red">{{ stats.currentYearUsage || '0.00' }}</div>
        </div>
        <div class="data-item">
          <div class="label">去年用电量(KW·h)</div>
          <div class="value green">{{ stats.lastYearUsage || '0.00' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import { getElectricityStatistics } from '@/api/apartment/record'

const stats = ref({
  todayUsage: '0.00',
  yesterdayUsage: '0.00',
  currentMonthUsage: '0.00',
  lastMonthUsage: '0.00',
  currentYearUsage: '0.00',
  lastYearUsage: '0.00',
  statisticsTime: ''
})

// 获取电量统计数据
function getStatistics() {
  getElectricityStatistics().then(res => {
    if (res.code === 200) {
      stats.value = res.data
    }
  })
}

onMounted(() => {
  getStatistics()
})
</script>

<style scoped>
.electricity-statistics-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  height: 100%; /* 确保卡片高度填满容器 */
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.card-content {
  flex: 1; /* 让内容区域自动填充剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 均匀分布各行 */
}

.title {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.title .el-icon {
  margin-left: 5px;
  font-size: 14px;
  color: #909399;
}

.data-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.data-item {
  flex: 1;
  padding: 0 10px;
}

.label {
  color: #606266;
  font-size: 14px;
  margin-bottom: 8px;
}

.value {
  font-size: 24px;
  font-weight: bold;
}

.red {
  color: #F56C6C;
}

.green {
  color: #67C23A;
}
</style> 